<template>
  <view class="coupon-popup" v-if="visible" @click.stop>
    <view class="close-btn" @tap="closePopup">
      <u-icon name="close" color="#FFFFFF" size="40"></u-icon>
    </view>
    <view class="coupon-content">
      <view class="user-title">恭喜{{ userInfo.surname }}{{ userInfo.gender == '男' ? '先生' : '女士' }} 获得</view>
      <view class="coupon-amount">
        <text class="amount-num amount-gradient">{{ discountAmount }}</text><br />
      </view>
      <view class="amount-unit amount-gradient">
        元优惠券
      </view>
      <view class="get-btn" @tap="useCoupon"></view>
      <view class="final-price">每天仅抽取50位幸运缘主赠送优惠金<br />优惠后29.8元揭晓测算结果</view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'CouponPopup',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    discountAmount: {
      type: Number,
      default: 10,
    },
  },
  computed: {
    ...mapGetters('fortune', ['userInfo']),
  },
  methods: {
    closePopup() {
      this.$emit('close');
    },
    useCoupon() {
      this.$emit('import-coupon');
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./Coupon.scss";
</style>